// function initAct() de 
var initAct = function () {
	reLoad ();
};

window.addEvent ('domready', function () {
	// Inicializamos Menu de navegacion
	//initMenu ();

	var images = $$('#pictures div')
	var hidden_images = $$('#hidden-pictures div');

	// Variables de Drags y Drops
	var drags = $$('#drags div');
	var drops = $$('#drops div')
	
	// Modificamos el desplazamiento de las imagenes (background-position).
	images.each (function (image, iI) {
		var bgPos = iI*(-250).toString() + 'px -250px';
		var bgPos2 = iI*(-250).toString() + 'px top';
		image.setStyles ({
			'background-position': bgPos,
			left: $adjBoxes[iI].x,
			top: $adjBoxes[iI].y
		});

		hidden_images[iI].setStyles ({
			'background-position': bgPos2,
			left: $adjBoxes[iI].x,
			top: $adjBoxes[iI].y
		});
		
		drops[iI].setStyles ({
			left: $adjBoxes[iI].x + 15,
			top: $adjBoxes[iI].y + 255
		});
	});

	// Creamos objeto tipo Drag and Drop Basico
	var miDxD = new DxD.Base (drags, drops, {
		container: $('content'),
		dragDelete: 'none',
		sendToBack: 'ini',
		adjDrags: [
			{ x: 10, y: 530 },
			{ x: 230, y: 530 },
			{ x: 470, y: 530 },
			{ x: 700, y: 530 }
		]
	});


	// Evento trueDrop
	miDxD.addEvents ({
		'drop': function ($objDrag, $objDrop) {
			console.debug ($objDrag, $objDrop);
		},
		'trueDrop': function ($objDrag, $objDrop) {
		//	soundManager.play('snd' + (drop.Ind).toString());
			var cuadro = hidden_images[$objDrop.ind];
			var $picShow = new Fx.Morph((cuadro), {duration:1500, wait:false});
			$picShow.start ({
				opacity: [0, 1]
			})
		}
	});

	var initAct2 = function () {

		miDxD.elDrags.each (function (drag, iD){
			drag.node.setStyles ({
				left: miDxD.options.adjDrags[iD].x,
				display: 'block'
			});

			(function () {drag.fx.start ({
				top: [300, miDxD.options.adjDrags[iD].y]
			})}).delay (150*iD);
		});

		miDxD.elDrops.each (function (drop, iD){
			drop.node.setOpacity (0);
			(function () {drop.fx.start ({
				opacity: 1
			})}).delay (150*iD);
		});
	};
	
	// Llamamos inicio de Actividad
	initAct2();
});